<script lang="ts" setup>
import type { BackgroundSetting } from '@/api/types/Setting.ts'
import UploadImage from '@/component/Upload/UploadImage.vue'
import UploadVideo from '@/component/Upload/UploadVideo.vue'

const props = defineProps<{
    formData: BackgroundSetting
}>()

const emits = defineEmits<{
    (event: 'change'): void
}>()

const onChange = () => emits('change')

const onCropChange = () => {

    const { topAndBottomEqualCrop, leftAndRightEqualCrop, topCrop, leftCrop } = props.formData.video ?? {}
    if (topAndBottomEqualCrop) {
        props.formData.video!.bottomCrop = topCrop!
    }
    if (leftAndRightEqualCrop) {
        props.formData.video!.rightCrop = leftCrop!
    }

    onChange()
}

</script>

<template>
<a-form-item field="type" label="类型">
    <a-radio-group v-model="formData.type" type="button" @change="onChange">
        <a-radio :value="'image'">图片</a-radio>
        <a-radio :value="'video'">视频</a-radio>
    </a-radio-group>
</a-form-item>

<template v-if="formData.type === 'image'">
    <a-form-item field="image.uri" label="图片">
        <UploadImage v-model:uri="formData.image!.uri" @change="onChange" />
    </a-form-item>
</template>

<template v-else-if="formData.type === 'video'">
    <a-form-item field="video.uri" label="视频">
        <UploadVideo v-model:uri="formData.video!.uri" @change="onChange" />
    </a-form-item>

    <a-form-item field="video.rate" label="播放速度">
        <a-slider
                v-model="formData.video!.rate"
                :max="3"
                :min="0.5"
                :step="0.2"
                show-ticks
                @change="onChange"
        />
    </a-form-item>

    <a-row>
        <a-col :span="formData.video!.topAndBottomEqualCrop ? 4: 24">
            <a-form-item field="video.topAndBottomEqualCrop" label="上下裁剪同步">
                <a-switch v-model="formData.video!.topAndBottomEqualCrop" @change="onCropChange" />
            </a-form-item>
        </a-col>

        <template v-if="formData.video!.topAndBottomEqualCrop">
            <a-col :span="20">
                <a-form-item field="video.topCrop" label="上下裁剪">
                    <a-slider
                            v-model="formData.video!.topCrop"
                            :max="2160"
                            :min="0"
                            :step="1"
                            show-ticks
                            @change="onCropChange"
                    />
                </a-form-item>
            </a-col>
        </template>
        <template v-else>
            <a-col :span="12">
                <a-form-item field="video.topCrop" label="顶部裁剪">
                    <a-slider
                            v-model="formData.video!.topCrop"
                            :max="2160"
                            :min="0"
                            :step="1"
                            show-ticks
                            @change="onChange"
                    />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item field="video.bottomCrop" label="底部裁剪">
                    <a-slider
                            v-model="formData.video!.bottomCrop"
                            :disabled="formData.video!.topAndBottomEqualCrop"
                            :max="2160"
                            :min="0"
                            :step="1"
                            show-ticks
                            @change="onChange"
                    />
                </a-form-item>
            </a-col>
        </template>

        <a-col :span="formData.video!.leftAndRightEqualCrop ? 4 : 24">
            <a-form-item field="video.leftAndRightEqualCrop" label="左右裁剪同步">
                <a-switch v-model="formData.video!.leftAndRightEqualCrop" @change="onCropChange" />
            </a-form-item>
        </a-col>

        <template v-if="formData.video!.leftAndRightEqualCrop">
            <a-col :span="20">
                <a-form-item field="video.leftCrop" label="左右裁剪">
                    <a-slider
                            v-model="formData.video!.leftCrop"
                            :max="3840"
                            :min="0"
                            :step="1"
                            show-ticks
                            @change="onCropChange"
                    />
                </a-form-item>
            </a-col>
        </template>
        <template v-else>
            <a-col :span="12">
                <a-form-item field="video.leftCrop" label="左侧裁剪">
                    <a-slider
                            v-model="formData.video!.leftCrop"
                            :max="3840"
                            :min="0"
                            :step="1"
                            show-ticks
                            @change="onChange"
                    />
                </a-form-item>
            </a-col>

            <a-col :span="12">
                <a-form-item field="video.rightCrop" label="右侧裁剪">
                    <a-slider
                            v-model="formData.video!.rightCrop"
                            :disabled="formData.video!.leftAndRightEqualCrop"
                            :max="3840"
                            :min="0"
                            :step="1"
                            show-ticks
                            @change="onChange"
                    />
                </a-form-item>
            </a-col>
        </template>
    </a-row>

</template>

<a-form-item field="mask.enable" label="遮罩">
    <a-switch v-model="formData.mask.enable" @change="onChange" />
</a-form-item>

<template v-if="formData.mask.enable">
    <a-form-item field="mask.color" label="遮罩颜色">
        <a-color-picker
                v-model="formData.mask.color"
                :hideTrigger="false"
                format="rgb"
                showHistory
                showPreset
                @change="onChange"
        />
    </a-form-item>

    <a-form-item field="mask.opacity" label="遮罩透明度">
        <a-slider
                v-model="formData.mask.opacity"
                :max="1"
                :min="0"
                :step="0.1"
                show-ticks
                @change="onChange"
        />
    </a-form-item>

</template>

<a-form-item field="specialEffects.blur" label="背景模糊">
    <a-slider
            v-model="formData.specialEffects.blur"
            :max="100"
            :min="0"
            :step="1"
            @change="onChange"
    />
</a-form-item>

</template>

<style lang="scss" scoped>

</style>
